<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C++搜索引擎</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <!-- 头部导航栏 -->
    <header class="header">
        <div class="logo-container">
            <h1 class="logo">C++搜索引擎</h1>
        </div>
        
        <!-- 右上角登录界面 -->
        <div class="user-controls">
            <div id="login-btn" class="btn login-btn">登录</div>
            <div id="register-btn" class="btn register-btn">注册</div>
            <div id="user-info" class="user-info" style="display: none;">
                <a href="user_center.html" id="username-display" class="username-link"></a>
                <button id="logout-btn" class="btn logout-btn">退出</button>
            </div>
        </div>
    </header>

    <!-- 主搜索区域 -->
    <main class="main-content">
        <div class="search-container">
            <h2 class="slogan">快速搜索，精准查找</h2>
            <div class="search-box">
                <input type="text" id="search-input" placeholder="请输入搜索关键词" autocomplete="off">
                <button id="search-btn" class="search-button">搜索</button>
            </div>
            <div id="suggestions" class="suggestions"></div>
            <div id="quick-tags" class="quick-tags"></div>
        </div>

        <!-- 搜索结果区域 -->
        <div id="search-results" class="search-results">
            <!-- 搜索结果将在这里显示 -->
        </div>
        <div id="search-meta" class="search-meta"></div>

        <!-- AI回答区域 -->
        <div id="ai-answer" class="ai-answer">
            <!-- AI回答将在这里显示 -->
        </div>
    </main>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>用户登录</h2>
            <form id="login-form">
                <div class="form-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" required>
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" required>
                </div>
                <button type="submit" class="btn submit-btn">登录</button>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>用户注册</h2>
            <form id="register-form">
                <div class="form-group">
                    <label for="register-username">用户名</label>
                    <input type="text" id="register-username" required>
                </div>
                <div class="form-group">
                    <label for="register-password">密码</label>
                    <input type="password" id="register-password" required>
                </div>
                <div class="form-group">
                    <label for="register-phone">手机号 (可选)</label>
                    <input type="tel" id="register-phone">
                </div>
                <div class="form-group">
                    <label for="register-email">邮箱 (可选)</label>
                    <input type="email" id="register-email">
                </div>
                <button type="submit" class="btn submit-btn">注册</button>
            </form>
        </div>
    </div>


    <!-- AI助手悬浮球 -->
    <div id="ai-assistant" class="ai-assistant">
        <div class="ai-ball">
            <div class="ai-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1L9 7V9H3V11H5V19C5 20.1 5.9 21 7 21H17C18.1 21 19 20.1 19 19V11H21V9H21ZM17 19H7V11H17V19Z" fill="white"/>
                </svg>
            </div>
            <div class="ai-pulse"></div>
        </div>
        <div class="ai-chat-panel">
            <div class="ai-chat-header">
                <h3>AI智能助手</h3>
                <button class="ai-close-btn">&times;</button>
            </div>
            <div class="ai-chat-messages" id="ai-chat-messages">
                <div class="ai-welcome">
                    <p>👋 你好！我是你的AI助手，有什么可以帮助你的吗？</p>
                </div>
            </div>
            <div class="ai-chat-input">
                <input type="text" id="ai-chat-input" placeholder="输入你的问题...">
                <button id="ai-send-btn">发送</button>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 C++搜索引擎 - 版权所有</p>
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">使用帮助</a>
                <a href="#">联系我们</a>
            </div>
        </div>
    </footer>

    <script src="/js/app.js"></script>
</body>
</html>
